<template>
  <div class="shelf">
    <header class="bookxq">
      <div class="title">
        <router-link to class="left">
          <span class="ui-leftaw-2" @click="$router.back(-1)"></span>
          <!-- <span class="ui-leftaw-2"></span> -->
        </router-link>
        <div class="tit-top">
          <h3>历史</h3>
          <router-link to class="home" v-if="del"
            ><span @click="dels">移除</span></router-link
          >
          <router-link to class="home" v-else
            ><span @click="dels">取消</span></router-link
          >
        </div>
      </div>
    </header>
    <div class="bookbox">
      <ul>
        <li v-for="(item, i) in book_list">
          <router-link :to="`/cs?id=${item.id}&title=${item.title}`">
            <b :class="'rank-' + (i + 1)"></b>
            <div class="book-1">
              <img :src="item.link[1].href" alt="" />
            </div>
            <div class="text-tb">
              <h4>{{ item.title }}</h4>
              <p>{{ item.author.name }}</p>
            </div>
          </router-link>
          <div class="btn-close" v-show="but" @click="deldate(item.id)"></div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { bkxqFunc } from "@/request/index";
export default {
  data() {
    return {
      book_list: [],
      del: true,
      but: false,
    };
  },
  methods: {
    csfe() {
      let datastr = localStorage.getItem("userdata");
      if (datastr) {
        let iddata = JSON.parse(datastr);
        // console.log(iddata);
        let books = iddata.cookic;
        if (books.length >= 0) {
          books.forEach((item) => {
            bkxqFunc(item.id, item.title)
              .then((res) => {
                this.book_list.push(res.feed.entry);
              })
              .catch((err) => {
                console.log("请求失败...");
              });
          });
          console.log(this.book_list);
        }else{
          alert("书架无书，请收藏")
        }
      }
    },
    dels() {
      this.del = !this.del;
      if (this.del == false) {
        this.but = true;
      } else {
        this.but = false;
      }
    },
    deldate(id) {
      let datastr = localStorage.getItem("userdata");
      if (datastr) {
        let iddata = JSON.parse(datastr);
        // console.log(id);
        let dlstr = iddata.cookic.filter((item) => {
          if (item.id !== id) {
            return true;
          }
        });
        let newdata = dlstr;
        iddata.cookic = newdata;
        // console.log(iddata);
        localStorage.setItem("userdata", JSON.stringify(iddata));
        this.$router.go(0);
      }
    },
  },
  created() {
    this.csfe();
  },
};
</script>
<style lang="scss">
@import url(../static/css/reset.css);
.shelf {
  .bookxq {
    width: 100%;
    background-color: black;
    min-width: 362px;
    .title {
      margin: auto 1%;
      height: 44px;
      line-height: 44px;
      a.left {
        float: left;
        font-size: 14px;
        .ui-leftaw-2 {
          display: inline-block;
          margin-bottom: 3px;
          margin-left: 15px;
          margin-right: 15px;
          vertical-align: middle;
          width: 10px;
          height: 18px;
          background: url(../static/imgs/arrow-left.png);
          background-size: 100% 100%;
        }
      }
      .tit-top {
        padding: 0 2%;
        box-sizing: border-box;
        text-align: center;
        h3 {
          width: 80%;
          display: inline-block;
          color: white;
        }
        a {
          display: inline-block;
          &.home {
            width: 10%;
            height: 28px;
            line-height: 28px;
            color: #fff;
            background: #000;
            font-size: 15px;
            padding: 0;
            text-align: right;
          }
        }
      }
    }
  }
  .bookbox {
    width: 100%;
    margin: 10px 26px;
    position: fixed;
    // background: black;
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        position: relative;
        width: 26%;
        margin-right: 15px;
        margin-bottom: 10px;
        [class^="book"] {
          img {
            width: 100%;
            height: 132px;
            border-radius: 5px;
          }
        }
        [class^="text"] {
          color: #333;
          outline: none;
          padding-left: 10%;
          text-align: start;
          h4 {
            font-size: 15px;
            line-height: 19px;
            height: 38px;
            max-height: 38px;
          }
          p {
            color: #888;
            line-height: 15px;
            height: 15px;
            font-size: 12px;
          }
        }
        .btn-close {
          position: absolute;
          right: -8px;
          top: -8px;
          width: 24px;
          height: 24px;
          border: 1px solid transparent;
          background-color: transparent;
          background-image: url(../static/imgs/close.png);
          background-size: cover;
          border-radius: 50%;
          cursor: pointer;
        }
      }
    }
  }
}
</style>